<template>
  <div class="topic-container">

    <div class="header-box" style="display:flex;justify-content: flex-end">
      <div @click="order">
        <IconAli :sty="{width:'40px',height:'40px',margin:'-2px 0px 0px 0px'}" icon='order-1'></IconAli>
      </div>
      <div @click="add">
        <IconAli :sty="{width:'32px',height:'32px',marginRight:'32px'}" icon='add'></IconAli>
      </div>
    </div>


    <div class="table-box">
      <Table :columns="columns"
             :data="topicList"
             stripe
             border
             :highlight-row="true"
             size=large>


        <template slot-scope="{ row, index }" slot="status">
          <i-switch v-model="row.status==1"
                    true-color="#19BE6B" false-color="#ff4949"
                    size="large"
                    :disabled="row.topicId==0"
                    @on-change="lock(row)">
            <span slot="open">在用</span>
            <span slot="close">冻结</span>
          </i-switch>
        </template>

        <template slot-scope="{ row, index }" slot="handle">
          <div style="display: flex;justify-content: center;">
            <div @click="update(row)">
              <IconAli :sty="{width:'30px',height:'30px',marginRight:'4px'}" icon='edit'></IconAli>
            </div>
            <div @click="del(row)" v-if="row.topicId!=0">
              <IconAli :sty="{width:'30px',height:'30px',marginLeft:'4px'}" icon='sub'></IconAli>
            </div>
          </div>
        </template>

      </Table>

    </div>


    <!--新增专题-->
    <Modal
        v-model="addFlag"
        title="新增专题"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="addOk">

      <el-form label-position="right" label-width="80px" :model="topic">
        <el-form-item label="专题名称">
          <el-input clearable v-model="topic.topicName"></el-input>
        </el-form-item>

        <el-form-item label="专题说明">
          <el-input type="textarea"
                    placeholder="请输入专题简介"
                    :autosize="{minRows:3}"
                    clearable
                    :rows="3"
                    maxlength="1000"
                    show-word-limit
                    v-model="topic.topicDesc"></el-input>
        </el-form-item>
      </el-form>

    </Modal>

    <!--删除专题-->
    <Modal
        v-model="deleteFlag"
        title="删除专题信息"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="deleteOk">
      <template #header>
        <IconAli :sty="{width:'40px',height:'40px'}" icon='danger' style="margin:6px 0px 0px 16px"></IconAli>
      </template>

      <div style="display:flex;flex-direction:column;margin-left: 16px">
        <div class="delTip">是否删除以下专题,此操作不可撤销,请谨慎操作!</div>
        <div class="nodeTip">{{ topic.topicName }}</div>
      </div>

    </Modal>

    <!--修改专题-->
    <Modal
        v-model="updateFlag"
        title="编辑专题信息"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="updateOk">

      <el-form label-position="right" label-width="80px" :model="topic">
        <el-form-item label="专题名称">
          <el-input clearable v-model="topic.topicName"></el-input>
        </el-form-item>

        <el-form-item label="专题说明">
          <el-input type="textarea"
                    placeholder="请输入专题简介"
                    :autosize="{minRows:3}"
                    clearable
                    :rows="3"
                    maxlength="1000"
                    show-word-limit
                    v-model="topic.topicDesc"></el-input>
        </el-form-item>
      </el-form>

    </Modal>

    <!--文档排序-->
    <Modal
        v-model="orderFlag"
        title="请排序"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="orderTopicOk">

      <Order :dataList="topicOrderList" @my-event-order-list="getOrderTopicList"></Order>

    </Modal>
  </div>
</template>

<script>
import Order from "@/views/common/Order"
import IconAli from "@/views/common/IconAli";

export default {
  //组件名称
  name: "Topic",
  props: [],
  //组件注册
  components: {IconAli, Order},
  //数据驱动
  data() {
    return {
      topic: {
        topicId: "",
        topicName: "",
        topicDesc: "",
        showOrder: "",
        status: ""
      },
      topicList: [],
      topicId: "",
      userId: "",
      //专题排序
      orderFlag: false,
      topicOrderList: [],
      topicOrderIdList: [],

      //专题新增 flag
      addFlag: false,
      //删除提示框
      deleteFlag: false,
      //编辑提示
      updateFlag: false,
      columns: [
        {
          type: "index",
          title: '索引',
          resizable: true,
          width: 100,
          align: "center"
        },
        {
          title: '编号',
          key: 'topicId',
          resizable: true,
          width: 300,
          align: "center"
        },
        {
          title: '专题名称',
          key: 'topicName',
          resizable: true,
          width: 300,
          align: "center"
        },
        {
          title: '专题简介',
          key: 'topicDesc',
          resizable: true,
          align: "center"
        },
        {
          title: '状态',
          key: 'status',
          resizable: true,
          align: "center",
          slot: 'status',
          width: 140,
          sortable: true
        },
        {
          title: '操作',
          key: 'handle',
          align: "center",
          width: 140,
          slot: 'handle',
        }
      ],
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    //点击排序按钮
    order() {
      this.topicOrderList.length = 0
      this.orderFlag = true
      for (let i = 0; i < this.topicList.length; i++) {
        let obj = this.topicList[i];
        let tmp = {
          id: obj.topicId,
          title: obj.topicName
        }
        this.topicOrderList.push(tmp);
      }
    },
    //排序专题
    getOrderTopicList(data) {
      this.topicOrderIdList = data.idList;
    },
    //排序确定
    orderTopicOk() {
      let data = this.topicOrderIdList
      this.axios.put(`/course/topic/topic/order`, data)
          .then((data) => {
            this.selectTopicList();
            this.$Message.success('专题排序成功');
          })
    },
    lock(row) {
      let status = row.status;
      let newStatus = 1;
      if (status == 1) {
        newStatus = 0;
      }
      let data = {
        status: newStatus
      }
      this.axios.put(`/course/topic/topic/${row.topicId}`, data)
          .then((data) => {
            this.selectTopicList();
            this.$Message.success('专题状态已经改变');
          })
    },
    //添加
    add() {
      this.addFlag = true;
      this.topic = {
        topicId: "",
        topicName: "",
        topicDesc: "",
        showOrder: "",
        status: ""
      }
    },
    //新增确定
    addOk() {
      let data = {
        topicId: this.topic.topicId,
        topicName: this.topic.topicName,
        topicDesc: this.topic.topicDesc,
        showOrder: this.topic.showOrder,
        status: this.topic.status
      }
      this.axios.post(`/course/topic/topic`, data)
          .then((data) => {
            this.selectTopicList();
            this.$Message.success('专题添加成功,请及时修改相关配置');
          })
    },
    //删除
    del(row) {
      this.deleteFlag = true
      this.topic = row
    },
    delTopic() {
      this.axios.delete(`/course/topic/topic/${this.topic.topicId}`)
          .then((data) => {
            this.selectTopicList();
            this.$Message.success('专题删除成功!');
          })
    },
    //确定删除
    deleteOk() {
      this.delTopic();
    },
    //编辑
    update(row) {
      //打开面板
      this.updateFlag = true
      this.topic = row
    },
    //编辑确定
    updateOk() {
      let data = {
        topicId: this.topic.topicId,
        topicName: this.topic.topicName,
        topicDesc: this.topic.topicDesc,
        showOrder: this.topic.showOrder,
        status: this.topic.status
      }
      this.axios.put(`/course/topic/topic/${this.topic.topicId}`, data)
          .then((data) => {
            this.selectTopicList();
            this.$Message.success('专题信息修改成功!');
          })
    },
    selectTopicList() {
      this.axios.get(`/course/topic/topic`)
          .then((data) => {
            this.topicList = data.data
          })
    },
  },
  //钩子函数
  mounted() {
    this.selectTopicList()
  }
}
</script>

<style lang="less" scoped>
.topic-container {
  width: 96%;
  margin-top: 20px;
  margin-left: 2%;
}

.delTip {
  font-size: 20px;
  font-weight: bold;
  color: #F00;
}

.nodeTip {
  margin-top: 6px;
  font-size: 16px;
  color: #000;
  font-weight: bolder;
}
</style>